<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8"
            @submit.prevent="page(1)">
          <div class="form-group">
            <vue-area areaId="areaIds"
                areaName="areaNames"
                :areaIdVal="staff.dto().areaId"
                :areaNameVal="staff.dto().areaName"
                :areaFixed="staff.dto().areaId"
                :selectBy="staff.dto().areaId"
                areaRequired="true,true,true,false,false">
            </vue-area>
          </div>
          <div class="form-group">
            <label class="font-noraml">考核周期：</label>
            <div class="input-group">
              <select data-placeholder="选择考核周期" id="bean-period" name="period" class="form-control"
                  required="" aria-required="true" aria-describedby="bean-period-error" aria-invalid="true">
                <option value="按年份">按年份</option>
                <option value="按季度">按季度</option>
                <option value="按月份">按月份</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
          </div>
        </form>
        <div class="table-responsive table-scrollable">
          <table class="table table-bordered table-striped  table-hover">
            <thead>
            <tr>
              <th style="width:20px;">#</th>
              <th>考核方案名称</th>
              <th>考核河道</th>
              <th>河长</th>
              <th>考核周期</th>
              <th>自评分</th>
              <th>上级打分</th>
              <th>总分</th>
              <th>排名</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
              <td>{{ (result.data.pageIndex - 1) * result.data.pageSize + index + 1 }}</td>
              <td>{{ item.targetName }}</td>
              <td>{{ item.riverName }}</td>
              <td>{{ item.userName }}</td>
              <td>{{ item.period }}</td>
              <td>{{ item.selfScore }}</td>
              <td>{{ item.leaderTime == null ? '-' : item.leaderScore }}</td>
              <td>{{ item.totalScore }}</td>
              <td>{{ item.rank }}</td>
            </tr>
            <tr v-if="result.data.data==null || result.data.data.length==0">
              <td colspan="9">
                <div class="alert"><strong>{{ result | message }}</strong></div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="b_page" v-html="tagPages"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'
import vueArea from '@/components/vue-area-5'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/datepicker-vendor.js'
import {axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.page(1);
    });
    $('.input-daterange').datepicker({
      language: 'zh-CN',
      format: 'yyyy-mm-dd',
      keyboardNavigation: !1,
      forceParse: !1,
      autoclose: !0
    });
  },
  watch: {
    // result: function (val) {
    //   this.$nextTick(function () { console.info('变量result渲染完成'); }
    // }
  },
  methods: {
    page(pageIndex) {
      let that = this;
      if (!pageIndex) pageIndex = 1;
      axios.post(site.examineResult.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.result = result;
          that.tagPages = that.tag.page(result.data);
        } else {
          alert(result.message);
        }
      });
    }
  }
}
</script>
